/*
 * @Description: 修改盒配置弹窗
 * @Author: Zzt
 * @Date: 2022-10-27 10:23:28
 * @LastEditTime: 2022-10-31 13:59:28
 */
import { Button, Form, Modal } from 'antd';
import { useEffect } from 'react';
import { useBoxConfigContext } from '../../contexts/BoxConfigContext';
import BoxForm from './BoxForm';
interface IEditProps {
  data?: any;
  visible: boolean;
  onClose: any;
}
const Edit = (props: IEditProps) => {
  const [form] = Form.useForm();
  const { data, visible, onClose } = props;
  console.log(props);
  useEffect(() => {
    console.log(data);
    form.setFieldsValue(data);
  }, [visible]);
  const { editBoxConfig } = useBoxConfigContext();
  /**
   * @description 提交表单,触发onFinish方法
   */
  const submitFunc = () => {
    form.submit();
  };
  const onFinish = (value: any) => {
    console.log({ ...data, ...value });
    editBoxConfig({ ...data, ...value });
    console.log(value);
    form.resetFields();
    onClose();
  };
  return (
    <>
      <Modal
        title="盒配置"
        visible={visible}
        onCancel={onClose}
        footer={[
          <div key="backSubmit">
            <Button key="back" onClick={onClose}>
              取消
            </Button>
            <Button key="submit" type="primary" onClick={() => submitFunc()}>
              保存
            </Button>
          </div>
        ]}
      >
        <BoxForm data={data} onFinish={onFinish} form={form} />
      </Modal>
    </>
  );
};
export default Edit;
